import { defineComponent, reactive, ref } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import menuService from "@/modules/permission/menu.service";
import { Modal, message } from "ant-design-vue";
import { EditOutlined, DeleteOutlined, PlusOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { CircleStateTitle } from "@/components/public/dotStateTitle/dotStateTitle";
import Add from "./popup/add/add";
import menuPageAuth from "./menuPage.auth";
export default defineComponent({
  name: "menuPage",
  setup() {
    const addRef = ref(null as any);
    const state = reactive({
      toolbar: {
        left: ["refresh", "add"],
        right: ["filter", "search"],
        add: {
          auth: 'menu_add',
          handler: () => {
            addRef.value.open();
          }
        },
      },
      dataSource: [],
      columns: [
        {
          title: "菜单名称",
          dataIndex: "menu_name",
          align: "left",
          width: "280px",
        },
        {
          title: "排序",
          dataIndex: "order_num",
          align: "center",
          width: "80px",
        },
        {
          title: "权限标识",
          dataIndex: "perms",
          align: "center",
          width: "180px",
        },
        {
          title: "路由路径",
          dataIndex: "path",
          align: "center",
          width: "240px",
        },
        {
          title: "状态",
          dataIndex: "status",
          align: "center",
          width: "80px",
        },
        {
          title: "创建时间",
          dataIndex: "create_time",
          align: "center",
          width: "200px",
        },
        {
          fixed: "right",
          title: "操作",
          dataIndex: "operation",
          align: "center",
          width: "120px",
          auth: {
            or: [
              'menu_add',
              'menu_edit',
              'menu_delete',
            ]
          }
        },
      ],
      loading: false,
      searchForm: {
        menu_name: {
          type: "input",
          label: "菜单名称",
          attrs: { placeholder: "菜单名称" },
        },
        status: {
          type: "select",
          label: "状态",
          attrs: { placeholder: "状态" },
          datas: [{ label: '正常', value: "1" }, { label: '停用', value: "0" }],
        },
      },
    } as any);
    // 服务
    const $service = new menuService();
    // 表格节点
    const LTableRef = ref(null as any);
    // 删除
    const deleteRow = (menu_id: number) => {
      Modal.confirm({
        title: '提示',
        icon: () => <ExclamationCircleOutlined />,
        content: '确认删除?',
        onOk: () => {
          $service.delete({
            menu_id,
          }).then(res => {
            message.success('删除成功!');
            LTableRef.value.$fetchTableData();
          })
        }
      })
    };
    return () => (
      <Page>
        <CardWithTitle title="菜单配置">
          {
            menuPageAuth()?.handler?.menu_search?.mixin?.(
              <LTable
                ref={LTableRef}
                service={$service}
                authConfig={menuPageAuth()}
                toolbar={state.toolbar}
                v-model={state}
              >
                <a-table
                  bordered={true}
                  scroll={{ x: "max-content" }}
                  dataSource={state.dataSource}
                  columns={state.columns}
                  loading={state.loading}
                  rowKey="menu_id"
                  childrenColumnName="childlist"
                  indentSize={30}
                  pagination={false}
                  v-slots={{
                    bodyCell: ({ column, record }: any) => {
                      // 操作栏
                      if (column.dataIndex === "operation") {
                        return (
                          <div class="operation">
                            {
                              menuPageAuth()?.handler?.menu_add?.hasAuth && <a-button
                                type="primary"
                                size="small"
                                v-slots={{
                                  icon: () => <PlusOutlined />,
                                }}
                                onClick={() => {
                                  addRef.value.open({
                                    parent_id: record.menu_id,
                                  });
                                }}
                              >
                                添加
                              </a-button>
                            }
                            {
                              menuPageAuth()?.handler?.menu_edit?.hasAuth && <a-button
                                class="et-btn-success"
                                type="primary"
                                size="small"
                                v-slots={{
                                  icon: () => <EditOutlined />,
                                }}
                                onClick={() => {
                                  addRef.value.open({
                                    menu_id: record.menu_id,
                                  });
                                }}
                              >
                                编辑
                              </a-button>
                            }
                            {
                              menuPageAuth()?.handler?.menu_delete?.hasAuth && <a-button
                                class="et-btn-danger"
                                type="primary"
                                size="small"
                                v-slots={{
                                  icon: () => <DeleteOutlined />,
                                }}
                                onClick={() => deleteRow(record.menu_id)}
                              >
                                删除
                              </a-button>
                            }
                          </div>
                        );
                      }
                      if (column.dataIndex === "status") {
                        return (
                          Number(record.status) ? <CircleStateTitle title="正常" type="success" /> : <CircleStateTitle title="停用" type="danger" />
                        )
                      }
                    },
                  }}
                />
              </LTable>
            )
          }
        </CardWithTitle>
        <Add
          ref={addRef}
          service={$service}
          parent={state.dataSource}
          onChange={() => { LTableRef.value.$fetchTableData(); }}
        />
      </Page>
    );
  },
});